﻿<UserControl x:Class="Gallery.MVVM.ViewBrokerSample.ViewBrokerSampleView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:apexMVVM="clr-namespace:Apex.MVVM;assembly=Apex.Silverlight"
             xmlns:apexControls="clr-namespace:Apex.Controls;assembly=Apex.Silverlight"
             xmlns:ViewBrokerSample="clr-namespace:Gallery.MVVM.ViewBrokerSample"
             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
             xmlns:system="clr-namespace:System;assembly=mscorlib" mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="600">

    <!-- The View creates its own ViewModel, so set the ViewModel 
    to a new instance of the ViewModel class. -->
    <UserControl.DataContext>
        <ViewBrokerSample:ViewBrokerSampleViewModel x:Name="viewModel" />
    </UserControl.DataContext>
    
    <!-- The main grid. Holds the description and the sample. -->
    <apexControls:ApexGrid Columns="300,Auto,*" Rows="Auto,*">

        <!-- The description. -->
        <TextBlock Grid.Row="0" Grid.Column="0" Text="Description" FontSize="20" FontWeight="Light" />
        <TextBlock Grid.Row="1" Grid.Column="0" FontSize="12" FontFamily="Segoe UI">
            
            In this sample we have a ViewModel that has a property representing the item selected in the tree control.
                We would like to show different views for the different types of items (files or folders).
            In this case we can use a 'ViewBroker'. A View Broker will show the correct view
                for a viewmodel. The association of View to ViewModel is done via 'ApexBroker'.
            View brokers are a great way to allow various items to be shown. View brokers
                can also be provided with a 'hint' that can change the view to select. An example 
                of how you might use this is to register views that allow data to be edited by expert users 
                with the hint 'expertMode' - you can then have the expert mode view automatically used.
            
        </TextBlock>

        <!-- Splitter. -->
        <!--<sdk:GridSplitter Grid.Column="1" Grid.RowSpan="2" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns" Width="5" />-->
        <sdk:GridSplitter Grid.Column="1" Grid.RowSpan="2" Width="5" />
        
        <!-- The sample. -->
        <TextBlock Grid.Row="0" Grid.Column="2" Text="Sample" FontSize="20" FontWeight="Light" />
        
        <!-- Sample grid. -->
        <apexControls:ApexGrid Grid.Row="1" Grid.Column="2" Rows="Auto,*" Columns="200,*">
            
            <!-- Tree title. -->
            <TextBlock Grid.Row="0" Grid.Column="0" FontSize="16" FontWeight="Light" Text="Files and Folders" />
            
            <!-- Files and folders tree. -->
            <sdk:TreeView x:Name="treeView" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Folders}" SelectedItemChanged="TreeView_SelectedItemChanged"
                      Margin="4">
                <sdk:TreeView.Resources>
                    <sdk:HierarchicalDataTemplate DataType="ViewBrokerSample:FolderViewModel" ItemsSource="{Binding Files}">
                        <TextBlock Text="{Binding Name}" />
                    </sdk:HierarchicalDataTemplate>
                    <sdk:HierarchicalDataTemplate DataType="ViewBrokerSample:FileViewModel">
                        <TextBlock Text="{Binding Name}" />
                    </sdk:HierarchicalDataTemplate>
                </sdk:TreeView.Resources>
            </sdk:TreeView>
            
            <!-- Details title. -->
            <TextBlock Grid.Row="0" Grid.Column="1" FontSize="16" FontWeight="Light" Text="Details" />

            <!-- View broker. -->
            <apexControls:ViewBroker Grid.Row="1" Grid.Column="1" ViewModel="{Binding SelectedItem}" Margin="4">
                <TextBlock>If there is nothing in the view model, then this will be shown.</TextBlock>
            </apexControls:ViewBroker>

        </apexControls:ApexGrid>

    </apexControls:ApexGrid>
</UserControl>
